<template>
	<view class="main">
		<view class="bottom" v-for="(i, index) in orderList" :key="i.id">
			<view class="header">
				<view class=""><image :src="i.productInfo.image" mode=""></image></view>
				<view class="">{{ i.productInfo.store_name }}</view>
			</view>
			<!-- adadaw -->
			<view class="content">
				<view class="">
					<view class="">评分</view>
					<view class="xinxin" @click="bb(i.productInfo.id)">
						<van-rate :value="value1" @change="onChange" allow-half void-icon="star" void-color="#eee" color="#f5ca48" size="25px" />
					</view>
					<view class="upload">
						<view class="imagelist" v-for="(item, index) in form.comments[i.productInfo.id].pics" :key="index">
							<image @click="imagePreview(i.productInfo.id, index)" style="width: 150rpx;height: 150rpx;" :src="item.image" mode=""></image>
							<view class="delete-icon" @click="deleteImage(i.productInfo.id, index)" v-if="form.comments[i.productInfo.id].pics.length != 0">
								<image src="https://www.szzn.group/uploads/20221126/92e7c8bc19b22e04464bb6a23c792c6d.png" mode=""></image>
							</view>
						</view>
						<view class="" v-if="form.comments[i.productInfo.id].pics.length < 3" @click="uploads(i.productInfo.id)">
							<view class="uploads"><van-icon name="plus" size="20px" color="#fff" /></view>
						</view>
					</view>
					<view class="pinjia">评价</view>
					<view class="area"><textarea style="height:100rpx;" v-model="form.comments[i.productInfo.id].comment" placeholder="请输入评价内容" /></view>
				</view>
			</view>
		</view>
		<view class="fooder" @click="submit"><view class="" @click="submit">提交评价</view></view>
	</view>
</template>

<script>
import { submitPingjia, orderDetail } from '@/api/api.js';
export default {
	data() {
		return {
			value: '',
			value1: '',
			form: {
				oid: null,
				comments: {}
			},
			orderFrom: [],
			orderList: [],
			image: '',
			isShowChooseImg: true,
			orderId: '',
			ids: '',
			iodIs: '',
			falg: false,
			arr: []
		};
	},
	onLoad(options) {
		this.orderId = options.orderId;
		this.init(this.orderId);
	},
	methods: {
		init() {
			let data = `uni=${this.orderId}`;
			orderDetail(data).then(res => {
				this.orderFrom = res.data.data.order;
				this.iodIs = this.orderFrom[0].id;
				this.orderFrom[0].cartInfo.forEach(item => {
					this.form.comments[item.productInfo.id] = {};
					this.form.comments[item.productInfo.id].pics = [];
					this.form.comments[item.productInfo.id].product_score = '';
					this.form.comments[item.productInfo.id].comment = '';
				});
				this.orderList = res.data.data.order[0].cartInfo;
				this.payTime = this.orderFrom[0].add_time;
				let time = new Date(this.payTime * 1000);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let f = time.getMinutes();
				let s = time.getSeconds();
				if (m < 10) {
					m = '0' + m;
				}
				if (f < 10) {
					f = '0' + f;
				}
				if (s < 10) {
					s = '0' + s;
				}
				this.payTime = y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s;

				if (this.orderFrom[0].paid == 0) {
					this.order = false;
				} else {
					this.order = true;
				}
			});
		},
		aa(id) {
			console.log(id);
			for (let i in this.form) {
				if (i == this.ids) {
					this.form.comments[i].comment = this.value1;
				}
			}
		},
		onChange(e) {
			this.value = e.detail;
			this.form.comments[this.ids].product_score = e.detail;
		},
		bb(id) {
			this.ids = id;
		},
		imagePreview(id, index) {
			this.form.comments[id].pics.forEach(item => {
				this.arr.push(item.image);
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},
		// 删除图片
		deleteImage(id, index) {
			this.form.comments[id].pics.splice(index, 1);
			this.$forceUpdate();
		},
		uploads(index) {
			let that = this;
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
						uni.uploadFile({
							url: 'https://www.szzn.group/api/login/upload',
							filePath: chooseImageRes.tempFilePaths[i],
							name: 'file',
							formData: {
								user: 'test' //
							},
							success: uploadFileRes => {
								that.image = uploadFileRes.data;
								that.image = JSON.parse(this.image);
								that.form.comments[index].pics.push({ image: this.image.data.url });
							},
							fail: err => {
								uni.showToast({
									title: '上传失败',
									duration: 2000
								});
							}
						});
					}
				},
				fail: err => {
					uni.showToast({
						title: '上传失败',
						duration: 2000
					});
				}
			});
		},
		submit() {
			if (this.falg) return;
			this.falg = true
			this.form.oid = this.iodIs;
			let data = this.form;
			uni.showLoading({
				title: '提交中'
			});
			submitPingjia(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading();
					uni.showToast({
						title: '评价成功',
						duration: 1500
					});
				let times = setTimeout(() => {
						uni.navigateBack()
						clearTimeout(times)
						this.falg = false
					}, 700);
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 1500
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	background-color: #f5f5f5;
	width: 100vw;
	height: 100vh;
	.bottom {
		border-bottom: 1px solid #eee;
	}
	.header {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
			margin-right: 15rpx;
		}
	}
	.content {
		// padding: 25rpx;
		// margin-top: 20rpx;
		> view {
			background-color: #fff;
			// border-radius: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;
			.xinxin {
				padding: 20rpx 0 60rpx 0;
			}
			.upload {
				display: flex;
				flex-wrap: wrap;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.pinjia {
				padding: 40rpx 0 20rpx 0;
				font-size: 28rpx;
			}
			.area {
				background-color: #f6f6f7;
				border-radius: 20rpx;
				padding: 20rpx;
				height: 180rpx;
			}
		}
		.imagelist {
			margin: 0 10rpx;
			position: relative;
		}
		.uploads {
			width: 150rpx;
			text-align: center;
			height: 150rpx;
			line-height: 150rpx;
			background-color: #eee;
			font-size: 28rpx;
		}
		.delete-icon {
			position: absolute;
			top: -16rpx;
			right: -13rpx;
			image {
				width: 40rpx !important;
				height: 40rpx !important;
			}
		}
	}
	.fooder {
		margin-top: 50rpx;
		padding: 0 0 50rpx 0;
		display: flex;
		justify-content: center;
		z-index: 10000;
		view {
			background-color: #289958;
			color: #fff;
			// height: 50rpx;
			padding: 20rpx 0;
			width: 660rpx;
			text-align: center;
			border-radius: 50px;
			font-size: 26rpx;
		}
	}
}
</style>
